import React, { Component } from 'react';

class Lifetwo extends Component {

    //创建ref容器
    inputvalue=React.createRef();
    div=React.createRef();

    //状态  数据
    state={
        arr:[
            "二十大",
            "html",
            "css",
            "js"
        ]
    }

    //方法
    getdata=()=>{
        let newvalue=this.inputvalue.current.value;
        this.setState({
            arr:[...this.state.arr,newvalue]
        })

        //清空 input   value
        this.inputvalue.current.value='';
    }

    //  componentDidUpdate  组件完成更新后执行  操作dom
    //当组件更新完添加了数据后自动执行下面方法让真实的dom里div
    componentDidUpdate(){
        console.log('组件完成更新后执行');
        this.div.current.scrollTop=this.div.current.scrollHeight;
    }

    render() {
        return (
            <div>
                <h1>componentDidUpdate</h1>
                <input type="text" ref={this.inputvalue} />
                <button onClick={this.getdata}>点击</button>
                <div ref={this.div} style={{width:300,height:"150px",border:"1px solid grey",overflow:"auto"}}>
                    <ul>
                        {
                            this.state.arr.map((item,index)=>{
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default Lifetwo;